$red: #ff0000;

.test-failure {
  @include test;
  -webkit-transit1on: width 2s; // 1
  background-sizer: contain; // 2
  colors: $red; // 3
  transit1on: width 2s; // 4
}

.test-correct {
  @include test;
  -webkit-transition: width 2s;
  background-size: contain;
  color: $red;
  transition: width 2s;
}

.test-interp {
  -webkit-#{$property}: $value;
}

// https://github.com/sasstools/sass-lint/issues/606
.test-vendor {
  -moz-osx-font-smoothing: auto;
}


.foo {
  font: {
    family: fantasy;
    size: 12px;
  }
  border: {
    top: {
      right: 1px solid #fff; // 5
      left: {
        color: red; // 6
      }
    }
    left: 2px solid #000;
  }
}

.bar {
  font: {
    famizy: fantasy; // 7
    size: 12px;
  }
  boder: {
    top: {
      rigt: 1px solid #fff; // 8
      left: {
        color: red; // 9
      }
    }
    left: 2px solid #000; // 10
  }
}

.foo {
  margin-#{$property-y}: -2 * $hint-arrow-width;
}

// https://github.com/sasstools/sass-lint/issues/1112
@mixin font-test1 {
  font: {
    family: Arial, sans-serif;
    style: normal;
    weight: 300;
  }
}

@mixin font-test2 {
  font: {
    family: Arial, sans-serif;
    style: normal;
    weight: 400;
  }
}

@mixin font-test2 {
  font: {
    fazily: Arial, sans-serif; // 11
    style: normal;
    weght: 400; // 12
  }
  border: {
    top: {
      left: {
        radius: 5px;
      }
    }
    right: 6px solid #fff;
    botom: {
      right: {
        radiu: 5px; // 13
      }
    }
  }
  background: {
    color: red;
  }
  background-colr: blue; // 14
  font-size: 12rem;
}

.element {
  --main-bg-color: brown;
}
